<template>
  <div class="audition271">
    <p>当我们需要修改store中值的时候，我们是通过 dispatch(action)将要修改的值传到reducer中的，这个过程是同步的，<br />如果我们要进行异步操作的时候，就需要用到中间件；中间件其实是提供了一个分类处理action的机会，<br />在 middleware 中，我们可以检阅每一个流过的action，并挑选出特定类型的 action进行相应操作，以此来改变 action；</p>
    <p>
      <br>
    </p>
    <p>applyMiddleware 是个三级柯里化的函数。<br />它将陆续的获得三个参数：第一个是 middlewares 数组，第二个是 Redux 原生的 createStore，<br />最后一个是 reducer；然后applyMiddleware会将不同的中间件一层一层包裹到原生的 dispatch 之上；</p>
    <p>
      <br>
    </p>
    <p>redux-thunk 中间件的作用就是让我们可以异步执行redux，首先检查参数 action 的类型，<br />如果是函数的话，就执行这个 action这个函数，并把 dispatch, getState, extraArgument 作为参数传递进去，<br />否则就调用next让下一个中间件继续处理action。</p>
    <p>
      <br>
    </p>
    <p>redux-thunk部分源码：</p>
    <v-md-preview :text="text1" />
  </div>
</template>

<script>
const prefix = '``` js'
const suffix = '```'
export default {
  name: 'Audition271',
  data() {
    return {
      text1: `${prefix}
      function createThunkMiddleware(extraArgument) {
        return ({ dispatch, getState }) => next => action => {
          if (typeof action === 'function') {
            return action(dispatch, getState, extraArgument)
          }
          return next(action)
        }
      }
      const thunk = createThunkMiddleware()
      thunk.withExtraArgument = createThunkMiddleware
      export default thunk
      \n${suffix}`,
    }
  }
}
</script>

<style>

</style>